<template>
  <div  id="leftSidebar">
    <div class="sidebar" :style="{height:sidebarHeight+'px'}">
      <a href="/login" class="logo" el-row type="flex" justify="end">
        <img :src="logonImg" alt=""> 
      </a>
      <!-- menu菜单 -->
      <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" :router='true' :collapse="menuCollapse" unique-opened>
        <label v-for="menu in menuList" :key="menu.id">
           <el-menu-item :index="menu.path" v-if="!menu.children" v-show="menu.menuShow" @click="getMenuId(menu.id)">
              <i class="iconfont" :class="menu.iconName"></i>
              <span v-text="menu.name" slot="title"></span>
          </el-menu-item>
          <el-submenu v-else :index="menu.path"  v-show="menu.menuShow">
            <template slot="title">
              <i class="iconfont" :class="menu.iconName"></i>
              <span slot="title" v-if="!menuCollapse">{{menu.name}}</span>
            </template>
            <label v-for="subMenu in menu.children" :key="subMenu.id">
              <el-menu-item :index="subMenu.path" v-if="!subMenu.children" v-show="subMenu.menuShow" @click="getMenuId(subMenu.id)">
                 <span v-text="subMenu.name" slot="title"></span>
              </el-menu-item>
               <el-submenu :index="subMenu.path" v-else v-show="subMenu.menuShow">
                  <template slot="title">
                    <span v-text="subMenu.name" slot="title"></span>
                  </template>
                  <label v-for="subMenu1 in subMenu.children" :key="subMenu1.id">
                     <el-menu-item :index="subMenu1.path" v-if="!subMenu1.children" v-show="subMenu1.menuShow" @click="getMenuId(subMenu1.id)">
                      <span v-text="subMenu1.name" slot="title"></span>
                    </el-menu-item>
                  </label>
               </el-submenu>
             </label>
          </el-submenu>
        </label>
      </el-menu>
    </div>
  </div>
</template>
<script>
import logonImg from 'images/logoWhite.png'
export default {
   props:{
    menuCollapse:Boolean
  },
  data (){
    let menus = JSON.parse(localStorage.getItem('menus'));
     console.log(menus);
      menus.forEach(e => {
        if(e.component==="system"){
            e.iconName='icon-system';
        }else {
            e.iconName='icon-menu';
        }
      });
      menus.unshift({
        path: '/dashboard',
        menuShow: true,
        name: '系统首页',
        children: null,
        component:'index',
        iconName:'icon-index',
        id: 0
      });
    return {
      logonImg,
      menuList:menus,
      defaultActive: this.$route.fullPath,/**当前激活菜单 */
    }
  },
  watch:{
    $route(to){
      let self = this;
      self.defaultActive = to.fullPath;
    },
    menuCollapse(newValue){
      this.menuCollapse= newValue? true:false;
    }
  },
  computed:{
    sidebarHeight(){
      return this.$store.state.clientHeight-60;
    }
  },
  created() {
  },
  mounted() {
      // console.log(this.menuList)
  },
  methods:{
    getMenuId(id){
      sessionStorage.setItem('menuId', id+'');
      // console.log(id);
    }
  }
}
</script>
<style lang="stylus" scoped>
#leftSidebar
  width 100%
  height 100%
  .logo
    display block
    font-size 18px
    overflow hidden
    height 60px
    text-align center
    line-height 60px
    color #fff
    background $theme-color
    >img
      vertical-align middle
      height 30px
    >span
      margin-left 8px
  .el-menu-vertical-demo
    height 100%
    .iconfont
      margin-right 8px
</style>


